<template>
  <div style="width: 100%">
    <div v-if="$slots.headerTop" style="margin: 5px">
      <slot name="headerTop"></slot>
    </div>
    <div class="flex items-center">
      <slot name="listTitle" v-if="$slots.listTitle"></slot>
      <ListTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.listTitle && title" />
      <div :class="`${prefixCls}__toolbar`">
        <slot name="toolbar"></slot>
        <Divider type="vertical" v-if="$slots.toolbar && listSetting" />
        <ListSetting :setting="getlistSetting" v-if="showListSetting" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import type { ListSetting } from '../types/adList';
  import type { PropType } from 'vue';
  import { defineComponent, computed } from 'vue';
  import { Divider } from 'ant-design-vue';
  import ListSettingComponent from './settings/index.vue';
  import ListTitle from './ListTitle.vue';
  import { useDesign } from '@/hooks/web/useDesign';
  import { isBoolean } from '@/utils/is';

  export default defineComponent({
    name: 'AdListHeader',
    components: {
      Divider,
      ListTitle,
      ListSetting: ListSettingComponent,
    },
    props: {
      title: {
        type: [Function, String] as PropType<string | ((data: any) => string)>,
      },
      titleHelpMessage: {
        type: [String, Array] as PropType<string | string[]>,
        default: '',
      },
      listSetting: {
        type: [Boolean, Object] as PropType<boolean | ListSetting>,
      },
    },
    setup(props) {
      const { prefixCls } = useDesign('basic-table-header');

      const showListSetting = computed(() => {
        const { listSetting } = props;
        if (isBoolean(listSetting)) {
          if (listSetting === false) {
            return false;
          } else {
            return true;
          }
        }
        if (listSetting) {
          return true;
        }
        return false;
      });

      const getlistSetting = computed(() => {
        if (showListSetting.value) {
          const { listSetting } = props;
          return listSetting as ListSetting;
        }
        return {};
      });
      return { prefixCls, showListSetting, getlistSetting };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-basic-table-header';

  .@{prefix-cls} {
    &__toolbar {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: flex-end;

      > * {
        margin-right: 8px;
      }
    }
  }
</style>
